<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

        <link type="text/css" href="themes/smoothness/ui.all.css" rel="stylesheet" />

        <link type="text/css" href="themes/ja_purity/css/template.css" rel="stylesheet" />
        <link type="text/css" href="themes/ja_purity/styles/background/lighter/style.css" rel="stylesheet" />
        <link type="text/css" href="themes/ja_purity/css/ja-sosdmenu.css" rel="stylesheet" />
        <link type="text/css" href="themes/ja_purity/styles/header/green/style.css" rel="stylesheet" />
        <link href="../templates/ja_purity/favicon.ico" rel="shortcut icon" type="image/x-icon" />
        <link type="text/css" href="themes/kozvetites.css" rel="stylesheet" />

        <title>Mátra 115 online eredmények</title>
        
        <script type="text/javascript" src="lib/jquery/jquery-1.3.2.min.js"></script>
        <script type="text/javascript" src="lib/jquery/jquery-ui-1.7.3.custom.min.js"></script>        

        <script language="javascript" type="text/javascript" src="lib/flot-0.6/excanvas.min.js"></script>
        <script language="javascript" type="text/javascript" src="lib/flot-0.6/jquery.flot.min.js"></script>
        <script language="javascript" type="text/javascript" src="lib/flot-0.6/jquery.flot.selection.min.js"></script>

        <script type="text/javascript" src="lib/jquery/jquery.progressbar.min.js"></script> 
        <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAgNiybibttxLVUBJ2mkBl9xQE_X7YnopivrsySw2N2L_vqDuODxQcf6v2miQuM_QNU1kh77ifNPrqQw"></script>
        
        <script type="text/javascript" src="m115-common.js"></script>
        <script type="text/javascript" src="m115-checkin.js"></script>
        <script type="text/javascript" src="m115-competitor.js"></script>
        <script type="text/javascript" src="m115-checkpoint.js"></script>
        <script type="text/javascript" src="m115-table.js"></script>
        <script type="text/javascript" src="m115-chart.js"></script>
        <script type="text/javascript" src="m115-export.js"></script>
 
        <script>
            var chart = null;
                
            $(function() {
                $("#dialog").dialog({ autoOpen: false });    
                $("#dialog-2").dialog({ autoOpen: false });    
            });
            
            google.load('visualization', '1', {
                packages: ['table']
            });
                        
            $(document).ready(function(){
                initialize();
                setRandomHeaderImage() ;
                showDiagram() ;
            });
        </script>
        
        <script type="text/javascript">
            var _gaq = _gaq || [];
            _gaq.push(['_setAccount', 'UA-202713-12']);
            _gaq.push(['_trackPageview']);

            (function() {
                var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
                ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
                var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
            })();

        </script>
        
    </head>
    <!--body class="fs3 FF" onload="setInterval( 'refresh()', 3*60*1000 )"--> 
    <body class="fs3 FF">
        <div id="topheader" class="header">
            <h1 class="logo-text">
              <a href="/index.php" title="Mátra 115">Mátra 115</a> 
              <span id="header-title">Online közvetítés</span>
            </h1>
            <div><p class="site-slogan">Közösségi Teljesítménytúra</p></div>
        </div>
    
        <div id="loading">
            <div>
                Adatok betöltése...
            </div>
            <div id ="progress"></div>
        </div>

        <div id="navigation">
            <div class="navlink">
                <a href="index.html">összefoglaló</a>
            </div>
            <div class="navlink">            
                <a href="index-realtime.html">valós idejű követés</a>
            </div>
            <div class="navlink">
                <a href="#" onClick='showDiagram()' style='background:#667E90'>áthaladás diagram</a>
            </div>
            <div class="navlink">
                <a href="#" onClick='showTable()' style='background:#667E90'>áthaladás táblázat</a>
            </div>                
            <div class="navlink">
                <a href="index-traxpace.html">Traxpace diagram</a>
            </div>
            <div class="navlink">
                <a href="index-media.html">friss képek, videók</a>
            </div>
        </div>
        
        <div id="tabs">                                   
            <div id="diagramtab">
                <table>
                    <tr>
                        <td>
                            <select id="diagramYearSelector" class="clickable" name="diagramYearSelector" onchange="setYear(this.value)">
                                <option value="2011">2011. június 4-5.</option>
                                <option value="2010">2010. június 5-6.</option>
                                <option value="2009">2009. június 6-7.</option>
                            </select>
                        </td>
                        <td>
                            <select id="chartCategorySelector" class="clickable" name="chartCategorySelector" onchange="setCategory(this.value)">
                                <option value="115">táv: 115</option>
                                <option value="88">táv: 88</option>
                                <option value="55">táv: 55</option>
                            </select>

                            &nbsp;&nbsp;
                            <select id="chartCompletionSelector" class="clickable" name="chartCompletionSelector" onchange="setCompletion(this.value)">
                                <option value="N">mindenki</option>
                                <option value="T">teljesítők</option>
                                <option value="SZ">szintidőn belül teljesítők</option>
                            </select>

                            &nbsp;&nbsp;
                            <select id="chartDataTypeSelector" class="clickable" name="chartDataTypeSelector" onchange="setDataType(this.value)">
                                <option value="relative">relatív idők</option>
                                <option value="absolute">abszolút idők</option>
                                <option value="section">szakaszidők</option>
                            </select>
                            
                            &nbsp;&nbsp;                            
                            <span class="clickable" onClick="refresh()">
                                Frissítés
                            </span>
                            &nbsp;&nbsp;
                            <span class="clickable" onClick="openDialog('dialog-2')">
                                Segítség
                            </span>

                            <div id="dialog-2">
                            <span>
                                <p>
                                    Válaszd ki a kategóriát, majd a bal oldali listából a név melletti négyzetet bepipálva az illető eredménye is felkerül a grafikonra.
                                    Érdemes csak azokat az indulókat kijelölni, akiket össze akarsz hasonlítani.
                                </p>
                                <p>
                                    A grafikont a 'Frissítés' gombbal lehet aktualizálni, ami közvetlen a 'Segítség' gomb mellett van. 
                                </p>
                            </span>
                            </div>

                        </td>
                    </tr>
                    <tr>
                        <td>
                            <div id="listcontainer">
                                Jelöld ki, akiket látni akarsz a grafikonon!
                                <div id="list"/>
                            </div>
                        </td>
                        <td>
                            <div id="chart"/>
                        </td>
                    </tr>
                </table>
            </div>
            
            <div id="tabletab">
                <table>
                    <tr>
                    <td>
                    <select id="tableYearSelector" class="clickable" name="tableYearSelector" onchange="setYear(this.value)">
                        <option value="2011">2011. június 4-5.</option>
                        <option value="2010">2010. június 5-6.</option>
                        <option value="2009">2009. június 6-7.</option>
                    </select>
                    </td>
                    <td>
                        &nbsp;&nbsp;
                        <select id="tableCategorySelector" class="clickable" name="tableCategorySelector" onchange="setCategory(this.value)">
                            <option value="115">táv: 115</option>
                            <option value="88">táv: 88</option>
                            <option value="55">táv: 55</option>
                        </select>
                    </td>
                    <td>
                            &nbsp;&nbsp;
                            <select id="tableCompletionSelector" class="clickable" name="tableCompletionSelector" onchange="setCompletion(this.value)">
                                <option value="N">mindenki</option>
                                <option value="T">teljesítők</option>
                                <option value="SZ">szintidőn belül teljesítők</option>
                            </select>
                    </td>
                        <td>
                            &nbsp;&nbsp;
                            <select id="tableDataTypeSelector" class="clickable" name="tableDataTypeSelector" onchange="setDataType(this.value)">
                                <option value="relative">relatív idők</option>
                                <option value="absolute">abszolút idők</option>
                                <option value="section">szakaszidők</option>
                            </select>
                        </td>
                        <td>
                            &nbsp;&nbsp;
                            <span class="clickable" onClick="refresh()">
                                Frissítés
                            </span>
                        </td>
                    </tr>
                </table>
                <br/>
                <div id="fulltable">
                </div>
                <!-- Bugos a CSV export, ezért kikommenteltem.
                <div>
                    <a href="javascript:exportDataAsCsv($('#exporter').show())">Adatok exportálása csv-be</a>
                    <div id="exporter">
                    </div>
                </div>
                -->
            </div>
            
        </div>
    </body>
</html>
